<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="布局练习float.css"> -->
    <!-- <link rel="stylesheet" href="布局练习position.css"> -->
    <link rel="stylesheet" href="布局练习flexbox.css">
</head>

<body>
    <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
    <div class="float1">
        <div>aside</div>
        <div>main</div>
    </div>
    <!-- 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化 -->
    <div class="float2">
        <div>aside</div>
        <div>main</div>
    </div>
    <!-- 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化 -->
    <div class="float3">
        <div>aside</div>
        <div>main</div>
    </div>
    <!-- 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化 -->
    <div class="float4">
        <!-- 如果按左中右来写 右会掉下去：如果当前元素的上一个元素是标准流中的元素，A的相对垂直位置不会改变，也就是说A的顶部总是对齐标准流中元素的底部，而右边的上一个元素如果是中间元素，中间元素没有浮动属于标准流，右边就会掉下去 -->
        <!-- <div>left</div>
        <div>right</div>
        <div>center</div> -->

        <!-- flexbox需要交换右和中的位置 -->
        <div>left</div>
        <div>center</div>
        <div>right</div>
    </div>
    <!-- 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化 -->
    <div class="float5">
        <div>left</div>
        <div>center</div>
        <div>right</div>
    </div>
</body>

</html>